<template>
  <div class="continer">
    <div class="publish_content">
      <div class="publish_sections">
        <div class="think_publish">
          <div class="enter_money">
            <div class="gift_coin">
              <input
                type="number"
                placeholder="请输入1~520个金币"
                maxlength="20"
              />
              <span>$</span>
            </div>
          </div>
          <div class="enter_blessing">
            <textarea placeholder="您的祝福" maxlength="200"></textarea>
          </div>
        </div>
        <!---->
      </div>
      <!----->
      <div class="publish_imgs">
        <div class="cancel">取消</div>
        <div class="send_out">发送</div>
      </div>
      <!--  -->
    </div>
    <div class="mask_contet" @click="close_cloe()"></div>
  </div>
</template>
<script>
export default {
  name: "RedEnvelope",
  methods: {
    close_cloe() {
      this.$emit("closes");
    },
  },
};
</script>
<style  scoped>
.continer {
  width: 100%;
}
.publish_content {
  width: 19.5%;
  margin: 0 auto;
  position: fixed;
  top: 30%;
  left: 0;
  right: 0;
  z-index: 99999;
  border-radius: 10px;
  padding-bottom: 12px;
  padding-top: 12px;
  background: url("../assets/redpackage/red_ballet.png") center no-repeat;
  height: 460px;
}
.publish_sections {
  width: 86%;
  margin: 0 auto;
}
.think_publish {
  padding-top: 8px;
  border-radius: 10px;
  margin-top: 40px;
  text-align: center;
}
.enter_money {
  width: 100%;
  border-radius: 6px;
  margin: 0 auto;
  background: #e94626;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.enter_money input {
  width: 70%;
  line-height: 38px;
  outline: 0;
  border: 0;
  background: #e94626;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.enter_money input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.enter_money input[type="number"] {
  -moz-appearance: textfield;
}
.enter_money input::-webkit-input-placeholder {
  /* WebKit browsers */
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.enter_money input:-moz-placeholder {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.enter_money input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.enter_money input::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.gift_coin {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.enter_blessing {
  width: 100%;
  margin: 15px auto 0 auto;
  background: #e94626;
  border-radius: 6px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.enter_blessing textarea {
  resize: none;
  width: 90%;
  margin: 10px auto 0 auto;
  background: #e94626;
  outline: 0;
  border: 0;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  height: 80px;
}
.enter_blessing textarea::-webkit-input-placeholder {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.publish_imgs {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 99999;
  top: 65%;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.cancel {
  line-height: 32px;
  width: 26%;
  text-align: center;
  height: 32px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #464646;
  background: #bebebe;
  border-radius: 23px;
}
.send_out {
  line-height: 32px;
  width: 26%;
  text-align: center;
  height: 32px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #da0f0f;
  background: #ffcc00;
  border-radius: 23px;
}
.mask_contet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(221, 221, 221, 0.6);
}
</style>
   




























